<!DOCTYPE html>
<html style="height: 100%" lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">

	<div id="main" style="height: 100%"></div>

	<script type="text/javascript"
		th:src="@{/ajax/libs/echarts/5.0.1/dist/echarts.min.js}"></script>
	<script type="text/javascript">
	var chartDom = document.getElementById('main');
	var myChart = echarts.init(chartDom);
	var option;

	option = {
	    title: {
	        text: '自定义雷达图'
	    },
	    legend: {
	        data: ['图一','图二', '张三', '李四']
	    },
	    radar: [
	        {
	            indicator: [
	                { text: '指标一' },
	                { text: '指标二' },
	                { text: '指标三' },
	                { text: '指标四' },
	                { text: '指标五' }
	            ],
	            center: ['25%', '50%'],
	            radius: 120,
	            startAngle: 90,
	            splitNumber: 4,
	            shape: 'circle',
	            name: {
	                formatter: '【{value}】',
	                textStyle: {
	                    color: '#72ACD1'
	                }
	            },
	            splitArea: {
	                areaStyle: {
	                    color: ['rgba(114, 172, 209, 0.2)',
	                        'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
	                        'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
	                    shadowColor: 'rgba(0, 0, 0, 0.3)',
	                    shadowBlur: 10
	                }
	            },
	            axisLine: {
	                lineStyle: {
	                    color: 'rgba(255, 255, 255, 0.5)'
	                }
	            },
	            splitLine: {
	                lineStyle: {
	                    color: 'rgba(255, 255, 255, 0.5)'
	                }
	            }
	        },
	        {
	            indicator: [
	                { text: '语文', max: 150 },
	                { text: '数学', max: 150 },
	                { text: '英语', max: 150 },
	                { text: '物理', max: 120 },
	                { text: '化学', max: 108 },
	                { text: '生物', max: 72 }
	            ],
	            center: ['75%', '50%'],
	            radius: 120
	        }
	    ],
	    series: [
	        {
	            name: '雷达图',
	            type: 'radar',
	            emphasis: {
	                lineStyle: {
	                    width: 4
	                }
	            },
	            data: [
	                {
	                    value: [100, 8, 0.40, -80, 2000],
	                    name: '图一',
	                    symbol: 'rect',
	                    symbolSize: 5,
	                    lineStyle: {
	                        type: 'dashed'
	                    }
	                },
	                {
	                    value: [60, 5, 0.30, -100, 1500],
	                    name: '图二',
	                    areaStyle: {
	                        color: 'rgba(255, 255, 255, 0.5)'
	                    }
	                }
	            ]
	        },
	        {
	            name: '成绩单',
	            type: 'radar',
	            radarIndex: 1,
	            data: [
	                {
	                    value: [120, 118, 130, 100, 99, 70],
	                    name: '张三',
	                    label: {
	                        show: true,
	                        formatter: function(params) {
	                            return params.value;
	                        }
	                    }
	                },
	                {
	                    value: [90, 113, 140, 30, 70, 60],
	                    name: '李四',
	                    areaStyle: {
	                        opacity: 0.9,
	                        color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
	                            {
	                                color: '#B8D3E4',
	                                offset: 0
	                            },
	                            {
	                                color: '#72ACD1',
	                                offset: 1
	                            }
	                        ])
	                    }
	                }
	            ]
	        }
	    ]
	}

	option && myChart.setOption(option);

	</script>
</body>
</html>